<template>
  <div class="body_bgi full p_10 relative">
    <div class="w_full h_50 lh_50 relative">
      <bigscreen-header :headerName="contestName + '排名信息'" />

      <el-button class="absolute right_0 top_center" @click="goToPage(`/all-sort1/${contestId}/${contestName}`)">查看全部排名</el-button>
    </div>
    
    <div class="w_80_p h_full-70 m_0_auto p_10 flex_column_between">
      <div 
        class="w_full h_24_p border_1_s_B2B1B0 border_radius_10 flex_row_start p_10" 
        v-for="(jugde, index) in judgeList" :key="index"
        @click="goToPage(`/gradeDetail/${contestId}/${contestName}/${jugde.name}/${jugde.money}`)"
      >
        <div class="w_200 h_full relative">
          <div class="w_80 h_80 absolute left_center top_0" :class="formatJugdeIcon(jugde.name)"></div>
          <div class="w_full fs_22 fw_bold h_30 text_center absolute left_center bottom_0 main_text bgc_fff">
            {{ formatJugdeMoney(jugde.name) }}
          </div>
        </div>

        <div class="w_full-300 h_full flex_row_center">
          <div 
            class="w_200 h_full mr_10 text_center flex_column_between flex_center animate__animated animate__fadeInRight border_1_s_B2B1B0 border_radius_10"
            v-for="(sheep, sheep_index) in jugde.children" :key="sheep_index"
          >
            <div class="h_full-50 border_radius_10 cursor">
              <img class="h_full" v-if="sheep.images" :src="formatAnimalImg(sheep.images)" alt="">
              <img class="h_full" v-else src="../assets/image/sheep.png" alt="">
            </div>

            <div class="w_full h_20 lh_20 color_fff fs_22 ls_2 cursor"> {{ sheep.sheepNumber }} </div>
            <div class="w_full h_25 lh_25 fs_20 fw_bold border_t_1_s_B2B1B0 main_text cursor"> {{ sheep.yzhName }} </div>
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getSheepSortList } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'ActivityRanking',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        contestId: null,
        contestName: null,

        judgeList: [],

        t: {
          img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7'
        },
        first: [
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
        ],
        sec: [
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
        ],
        third: [
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
          { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8cfEZqTZMGhGBIAmh8ztmAAAAA?w=134&h=201&c=7&r=0&o=5&pid=1.7' },
        ]
      }
    },
    async mounted() {  
      let contestId = this.$route.params.contestId
      let contestName = this.$route.params.contestName
      this.contestId = contestId
      this.contestName = contestName

      // 获取 xxx 羊 评分 排名
      this.getSheepSortList(contestId)
    },
    methods: {

      // 获取 赛羊 排行
      async getSheepSortList(contestId) {
        let res = await getSheepSortList(contestId)
        try {
          if (res.code == 1000 && res.data) {
            this.judgeList = res.data
          }
        } catch(err) {
          console.log('获取赛羊排行失败 : ', err);
        }
      },

      // 格式化 等级 icon
      formatJugdeIcon(val) {
        let icon = ''

        if (val == '特等奖') {
          icon = 't_icon'
        } else if (val == '一等奖') {
          icon = 'first_icon'
        } else if (val == '二等奖') {
          icon = 'sec_icon'
        } else if (val == '三等奖') {
          icon = 'third_icon'
        } else {
          icon = ''
        }

        return icon
      }, 

      formatJugdeMoney(val) {
        let money = 0

        if (val == '特等奖') {
          money = '10000.00'
        } else if (val == '一等奖') {
          money = '5000.00'
        } else if (val == '二等奖') {
          money = '3000.00'
        } else if (val == '三等奖') {
          money = '1000.00'
        } else {
          money = 0
        }

        return money
      },

      // 格式化 羊 图片, 获取 第一张 图片
      formatAnimalImg(str) {
        if (str) {
          let list = str.split(',')

          if (list.length) {
            return list[0]
          } 

          return ''
        }
      },

      // 10000.00
      formatMoney(val) {
        return val + '.00'
      },

      goToPage(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style>

</style>